<template>
	<view class="container">
		<view class="header-info">
			<view class="header-info-left">
				<view class="progress" :style="{ height: progress + '%' }">

				</view>
				<view class="progress-text">
					<text>{{process}}%</text>
					<text>SOC</text>
				</view>

			</view>
			<view class="header-info-right">
				<view class="info-item">
					<text class="title">状&emsp;态&emsp;</text>
					<text class="data">：{{nowRunstate}}</text>
				</view>
				<view class="info-item">
					<text class="title">总电压(V)：</text>
					<text class="data">：{{totalV}}</text>
				</view>
				<view class="info-item">
					<text class="title">总电流(A)</text>
					<text class="data">：{{totalA}}</text>
				</view>
				<view class="info-item">
					<text class="title">报警信息</text>
					<text class="data">：{{warnInfo}}</text>
				</view>
				<view class="info-item">
					<text class="title">位&emsp;置&emsp;</text>
					<text class="data">：-</text>
				</view>
				<view class="info-item">
					<text class="title">时&emsp;间&emsp;</text>
					<text class="data">：{{timeLast}}</text>
				</view>
				<view class="info-item">
					<text class="title">设&emsp;备&emsp;ID</text>
					<text class="data">：{{deviceName}}</text>
				</view>
			</view>
		</view>

		<view   class="echart-info">
			<view class="echart-box">
				<l-echart ref="voltageChartRef"></l-echart>
			</view>
			<view class=".explain-list">
				<view class="explain-item">
					<text class="title">最高电压(V)</text>
					<text class="data">{{maxV}}</text>
					<text class="title">电芯位置</text>
					<text class="data">{{maxIndex}}</text>
				</view>
				<view class="explain-item">
					<text class="title">最低电压(V)</text>
					<text class="data">{{minV}}</text>
					<text class="title">电芯位置</text>
					<text class="data">{{minIndex}}</text>
				</view>
				<view class="explain-item">
					<text class="title">平均电压(V)</text>
					<text class="data">{{avarageV}}</text>
					<text class="title">压差(V)</text>
					<text class="data">{{cutV}}</text>
				</view>
			</view>
		</view>

		<view  v-if="show"  class="echart-info">
			<view class="echart-box">
				<l-echart ref="temperatureChartRef" style="height: 400rpx"></l-echart>
			</view>
			<view class="explain-list">
				<view class="explain-item">
					<text class="title">最高温度(mV)</text>
					<text class="data">3364</text>
					<text class="title">温感位置</text>
					<text class="data">12</text>
				</view>
				<view class="explain-item">
					<text class="title">最低温度(mV)</text>
					<text class="data">3360</text>
					<text class="title">温感位置</text>
					<text class="data">25</text>
				</view>
				<view class="explain-item">
					<text class="title">平均温度(mV)</text>
					<text class="data">3361</text>
					<text class="title">温差(mV)</text>
					<text class="data">4</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script >
	import {
		ref,
	} from 'vue'
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
	export default {
		data() {
			return {
				show:"",
				id:"",
				deviceName:"",
				softwareVersion:"",
				deviceSerialNum:"",
				BMSFactory_ID:"",
				deviceMCUID_01:"",
				customer_ID:"",
				batteryVoltage:"",
				batteryTypeStr:"",
				projectName:"",	
				nowRunstate:"",
				totalV:"",
				totalA:"",
				timeLast:"",
				warnInfo:"",
				capcity:"",
				avarageV:"",
				cutV:"",
				minIndex:"",
				maxIndex:"",
				minV:"",
				max:"",
				process:0
			};
		},
		onLoad(options) {
			// options 是传递过来的参数对象
			this.deviceSerialNum =options.deviceSerialNum;
			if(this.deviceSerialNum){
				this.getUser()
			}
			// const progress = ref(76)
		},
		methods: {
				// 电压
				voltageChartRender(xAxisList,seriesList){
					const voltageChartoption = {
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: xAxisList
						},
						yAxis: {
							type: 'value',
							name: '电压(mV)',
						},
						series: [{
							data:seriesList,
							type: 'line',
							smooth: true,
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							itemStyle: {
								color: '#00cb14' // 设置折线的颜色
							}
						}],
					}
					setTimeout(async () => {
						const voltageChart = await this.$refs.voltageChartRef.init(echarts)
						voltageChart.setOption(voltageChartoption)
					}, 300)
				},
				getUser() {
					console.log(this.$api)
				    let sendData = {
				    	userId: this.deviceSerialNum+"",
				    }
				    console.log(sendData)
				    this.$api({
				    	url: '/api/deviceInfo/getDeviceInfoReal',
				    	header: 'form',
				    	data: sendData
				    }).then((res) => {
				    	let {
				    		code,
				    		msg,
							data
				    	} = res
						if(res.code==0){
							let{
								id,
								deviceName,
								softwareVersion,
								deviceSerialNum,
								BMSFactory_ID,
								deviceMCUID_01,
								customer_ID,
								batteryVoltage,
								batteryTypeStr,
								projectName,
								nowRunstate,
								totalV,
								totalA,
								timeLast,
								warnInfo,
								capcity,
								avarageV,
								cutV,
								minIndex,
								maxIndex,
								minV,
								maxV,
								process
								
							}=res.data
							this.id=res.data.id
							this.deviceName=res.data.deviceName
							this.softwareVersion=res.data.softwareVersion
							this.deviceSerialNum=res.data.deviceSerialNum
							this.BMSFactory_ID=res.data.BMSFactory_ID
							
							this.deviceMCUID_01=res.data.deviceMCUID_01
							this.customer_ID=res.data.customer_ID
							this.capcity=res.data.capcity
							this.batteryVoltage=res.data.batteryVoltage
							this.batteryTypeStr=res.data.batteryTypeStr
							this.projectName=res.data.projectName
							this.nowRunstate=res.data.nowRunstate
							this.totalV=res.data.totalV
							this.totalA=res.data.totalA
							this.timeLast=res.data.timeLast
							this.warnInfo=res.data.warnInfo
							
							this.avarageV=res.data.avarageV
							this.cutV=res.data.cutV
							
							this.minIndex=res.data.minIndex
							this.maxIndex=res.data.maxIndex
							
							this.minV=res.data.minV
							this.maxV=res.data.maxV
							this.process=res.data.process
							 
							
							// ------------------------------------
							let xAxisList=res.data.datasShow.map(item=>item.index)
							let seriesList =res.data.datasShow.map(item=>item.val)
							console.log('x坐标',xAxisList);
							console.log('Y坐标',seriesList);
							this.voltageChartRender(xAxisList,seriesList)
						}
				    	console.log(res.data)
				    })
				},
			}
	}
	
	
</script>

<style lang="scss">
	.header-info {
		height: 400rpx;
		background-color: #4994ed;
		display: flex;
		padding: 30rpx 20rpx;

		.header-info-left {
			width: 200rpx;
			margin-right: 40rpx;
			background-color: #89bef1;
			position: relative;
			border-radius: 10rpx;

			.progress {
				width: 100%;
				background-color: #ffffff;
				border-radius: 10rpx;
				position: absolute;
				bottom: 0;



			}

			.progress-text {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 10000;

				text {
					font-size: 58rpx;
					margin: 5rpx 0;
					color: #4994ed;
				}
			}
		}

		.header-info-left:before {
			content: "";
			width: 20px;
			height: 10px;
			background-color: #89bef1;
			position: absolute;
			top: -10px;
			left: 40px;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
		}

		.header-info-right {
			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				text {
					color: #ffffff;
					font-size: 28rpx;
				}

				.title {
					width: 150rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}

	.echart-info {
		margin-top: 20rpx;
		background-color: #ffffff;

		.echart-box {
			// height: 400rpx;
		}

		.explain-item {
			display: flex;
			align-items: center;
			border-top: 1rpx solid #efefef;
			height: 100rpx;

			.title {
				width: 200rpx;
				text-align: center;
				font-size: 30rpx;
				color: #9a9a9a;
			}

			.data {
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
</style>